<template>
  <!-- 种植方案列表 -->
  <div class="farm-card-main">
    <el-card
      :body-style="{
        padding: 0,
        margin: '10px',
        borderRadius: '10px',
        borderRadius: '14px',
      }"
      shadow="always"
    >
      <div v-for="item in stockItemList" :key="item.id">
        <el-card
          :body-style="{
            padding: '10px',
            margin: 0,
            borderRadius: '10px',
            borderRadius: '14px',
          }"
          shadow="always"
        >
          <div class="farm-item-container">
            <div class="list_">
              <div class="list-left">
                <img
                  src="../../../../../assets/img/moractiveBg.jpeg"
                  width="90"
                />
                <div class="plant_info">
                  <div class="plant_infotop">
                    <span
                      style="font-weight: 700; font-size: 22px; margin: 0 15px"
                      >{{ item.name }}</span
                    >
                    <span class="text">{{ item.varieties }}</span>
                    <span class="text">{{ item.varietiesnum }}亩</span>
                    <span class="text">{{ item.plantnum }}万株/亩</span>
                  </div>
                  <div class="core">
                    <div style="padding-bottom: 10px">
                      预计产量：<span style="color: rgba(248, 70, 58, 0.973)"
                        >{{ item.yield || "暂无产量信息" }}亩</span
                      >
                    </div>
                    <div>创建时间11：{{ item.CreationTime }}</div>
                  </div>
                </div>
              </div>
              <div class="list-right">
                <span @click="endPlantClick(item)">结束种植</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { queryPlantByLandId, endLand } from '@/api/farmEvent'
export default {
  data() {
    return {
      listParames: {},
      stockItemList: [
        {
          name: "水稻",
          varieties: "龙稻240", //水稻品种
          varietiesnum: "60", //总亩数
          plantnum: "20",
          CreationTime: "2021-5-21至2021年6月6日", //创建时间
          ton: "178" //产量
        }
      ],
      endParmas: {}//结束种植参数
    };
  },
  async mounted() {
    this.listParames = JSON.parse(localStorage.getItem("listParames"));
	this.landInfo = sessionStorage.getItem('massifDetails')&&JSON.parse(sessionStorage.getItem('massifDetails'))
	console.log(sessionStorage);
    this.$nextTick(() => {
	// this.setDetailInfo(this.landInfo)
      this.getList();
	  
		})
	  },
  methods: {
	 setDetailInfo(info){
	 		this.detailInfo = info
	 		sessionStorage.setItem("massifDetalis",JSON.stringify(this.detailInfo))
	 		console.log('massifDetalis',info);
	 		const details = JSON.parse(sessionStorage.getItem("massifDetails"))
			
	 	},
		
    // 获取种植列表数据
    async getList() {
      const response = await queryPlantByLandId({ landId: this.listParames.id });
      if (response.data.code == 200) {
        // 获取=列表数据赋值
        this.stockItemList = response.data.data;
      }
    },
	
    // 结束种植
    async endPlantClick(item) {
      // 结束种植参数取值
      this.endParmas.id = item.id;
      this.endParmas.plant = item.plant;
      // 单价和产品拿到之后在这赋即可
      const response = await endLand(this.endParmas);
      if (response.data.code == 200) {
        // 成功后弹出成功弹框
        this.$message({ type: "success", message: response.data.msg });
      }
    }
  }
};
</script>

<style scoped>
.farm-item-container {
  /* padding: 16px; */
  display: flex;
  justify-content: space-between;
  margin: 10px;
  /* border-bottom: 1px solid #c4cec9; */
}
.farm-item-container .plant_infotop {
  margin-bottom: 35px;
}
.text {
  padding: 3px 6px;
  margin: 0 10px 10px 10px;
  font-size: 14px;
  color: #11c26d;
  border: 1px solid #11c26d;
}
.core {
  margin: 0 15px;
  /* display: flex; */
}
.list_ {
  display: contents;
}
.list-left {
  display: flex;
}
.list_ .list-right {
  margin-top: 30px;
  font-size: 20px;
  /* padding-right: 60px; */
  margin-top: 70px;
}
.list-right span {
  border: 1px solid rgba(248, 70, 58, 0.973);
  color: rgba(248, 70, 58, 0.973);
  font-size: 16px;
  padding: 5px 8px;
  /* margin-bottom: 30px; */

  text-align: center;
  width: 60%;
}
</style>
